// 需求1:渲染学生成绩
function initScore() {
    axios({
        url: '/score/list'
    }).then(({
        data: res
    }) => {
        if (res.code == 0) {
            //  定义数组
            let arr = []
            for (let k in res.data) {
                //   k代表属性 res.data[k]代表属性值
                arr.push(`
             <tr>
                <th scope="row">${k}</th>
                <td>${res.data[k].name}</td>
                <td data-id="${k}" data-index="1" class="score">${res.data[k].score[0]}</td>
                <td data-id="${k}" data-index="2" class="score">${res.data[k].score[1]}</td>
                <td data-id="${k}" data-index="3" class="score">${res.data[k].score[2]}</td>
                <td data-id="${k}" data-index="4" class="score">${res.data[k].score[3]}</td>
                <td data-id="${k}" data-index="5" class="score">${res.data[k].score[4]}</td>
             </tr>
                `)

            }
            // for循环的外面,进行赋值
            tbody.innerHTML = arr.join("")
        }
    })
}
let tbody = document.querySelector('tbody')
initScore()
// 点击.score把里面的内容变成input
//  tr都是动态生成的,所以绑定事件需要事件委托
tbody.onclick = function (e) {
    // 判断点击事件是否是td,类名为score
    if (!e.target.classList.contains('score')) return
    // 如果的得到的是input的值,不能进行赋值
    if (!/^\d{1,3}$/test(e.target.innerHTML)) return
    // 赋值input之前,先保存原始内容
    let num = e.target.innerHTML
    // 把内容变成input
    // 1.创建一个input,方便后面绑定事件
    let input = document.createElement('input')
    input.value = num
    e.target.innerHTML = ""
    e.target.appendChild(input)
    input.focus()

    input.onblur = function () {
        e.target.innerHTML = num
    }
    // input中回车发送Ajax,修改成绩,重新渲染成绩
    // 三个事件都可以,keyup/keydown/input
    input.onkeyup = function (ev) {
        if (ev.key != 'Enter') return
        // 发送ajax
        axios({
            method: 'POST',
            url: '/score/entry',
            data: {
                "stu_id": this.parentNode.dataset.id,
                "batch": this.parentNode.dataset.index,
                "score": this.value
            }
        }).then(({
            data: res
        }) => {
            if (res.code == 0) {
                toastr.success('恭喜你,修改成绩成功!')
                initScore()
            }
        })
    }
}
// input失去插入条光标,恢复原始数据